<template>
	<view class="kjBg">
		<div class="banner">
			<image :src="spinfo.img" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="spDetail">
				<div class="price"><strong>原价：</strong>￥{{ spinfo.price }}元</div>
				<h2>{{ spinfo.title }}</h2>
				<div class="text">
					参与人数{{ptnum}} 丨 成团人数{{pcnum}}
				</div>
			</div>
			<div class="spDetail">
				<div class="item">
					<div class="label">针对人群</div>
					<div class="detail">{{ spinfo.renqun }}</div>
				</div>
				<div class="item">
					<div class="label">活动介绍</div>
					<div class="detail">{{ spinfo.introText }}</div>
				</div>
			</div>
			<div class="spIntro" v-if="spinfo.intro">
				<image :src="spinfo.intro" mode="widthFix"></image>
			</div>
		</div>
		
		<div class="fixBottom">
			<div class="flexBox">
				<div class="price">拼团价 ￥{{ spinfo.yhprice }}元</div>
				<div class="btnBox">
					<u-button type="warning" size="small" shape="circle" text="咨询客服" @click="toZixun()"></u-button>
				</div>
				<div class="btnBox">
					<u-button type="error" size="small" shape="circle" text="参与拼团" @click="checkInfo()"></u-button>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
import { mapActions } from 'vuex';
const db = wx.cloud.database();
export default {
	data() {
		return {
			openid: "",
			userInfo: {
				_id:"",
				phone: "",
				nickname:"",
				avatarUrl: ""
			},
			spid: "",
			spinfo:"",
			ptnum: 0,
			pcnum: 0
		};
	},
	computed: {
		userphone() {
			return this.$store.getters.userphone ? this.$store.getters.userphone : '';
		}
	},
	onShareAppMessage(options) {},
	onShareTimeline(res) {},
	onShow() {},
	onPageScroll(e) {
		let that = this;
	},
	onLoad(options) {
		this.spid = options.spid
	},
	watch: {
		userphone(val){
			if(this.userphone){
				this.getUserDetail()
			}
		}
	},
	created() {
		let that = this;
		this.getopenid()
		
	},
	mounted() {
		this.getGoods();
		this.getNum()
	},
	methods: {
		...mapActions([]),
		getopenid() {
			let that = this
			wx.cloud.callFunction({
				name: 'getopenid',
				data: {},
				complete: res => {
					wx.setStorageSync("useropenid", res.result.openid)
					that.openid = res.result.openid
					that.getUserDetail()
				}
			})
		},
		getUserDetail() {
			let that = this
			db.collection('all_user').where({
				_openid: that.openid
			}).get({
				success: res => {
					if (res.data.length > 0) {
						that.userInfo._id = res.data[0]._id
						that.userInfo.phone = res.data[0].phone
						that.userInfo.nickname = res.data[0].nickname
						that.userInfo.avatarUrl = res.data[0].avatarUrl
						that.LogSetPhone(that.userInfo.phone)
					}
				}
			})
		},
		getGoods() {
			let that = this;
			db.collection('pintuan_gooks').doc(that.spid).get({
				success:res => {
					that.spinfo = res.data
				}
			})
		},
		toZixun(){
			let that = this
			uni.navigateTo({
				url: "../../webview/index?href=" + encodeURIComponent("https://www.baixuemianshi.com/zhuanti/zx_ewm/") 
			})
		},
		async checkInfo(){
			let that = this
			await that.getUserDetail()
			if(!that.userInfo.phone){
				uni.showToast({
					icon:"error",
					title:"请先登录"
				})
				uni.navigateTo({
					url:"../../my/login?navTlt=真假白雪面试"
				})
				return 
			}
			if(!that.userInfo.nickname || !that.userInfo.avatarUrl){
				uni.showToast({
					icon:"error",
					title:"请授权头像&昵称"
				})
				uni.navigateTo({
					url:"../../my/info"
				})
				return
			}
			uni.navigateTo({
				url:"./detail?spid=" + that.spid
			})
		},
		async getNum(){ 
			let that = this
			let num1 = await db.collection("pintuan_user").where({status: "已完成"}).count()
			let num2 = await db.collection("pintuan_user").where({status: "未完成"}).count()
			that.ptnum = num1.total * 2 + num2.total
			that.pcnum = num1.total * 2
		}
	},
	components: {  }
};
</script>

<style>
@import url('./index.css');
</style>
